<template>
	<div class="app-columns-container flexrbc">
		<div class="app-left-container">
			<div class="model-container">
				<modelOutlinePass></modelOutlinePass>
			</div>
		</div>
		<div class="app-right-container">
			<div class="app-right-top-container flexccc">
				<faultList :data='dataList' :type="3"></faultList>
				<el-popover placement="top" trigger="click" width="300px" popper-class='fault-popover-container'>
					<div class="fault-container">
						<div class="flexrbc fault-header">
							<div class='ellipsis'>故障数据</div>
							<div class='ellipsis'>传感器点位</div>
							<div class='ellipsis'>故障部位</div>
						</div>
						<div class="flexrbc fault-row">
							<div class='ellipsis'>269v</div>
							<div class='ellipsis'>制动器进出线端子</div>
							<div class='ellipsis'>电梯</div>
						</div>
					</div>
					<div class="fault-btn pointer" slot="reference">故障诊断</div>
				</el-popover>
			</div>
			<div class="app-right-bottom-container flexccc">
				<faultList :data='dataList' :type="4"></faultList>
				<el-popover placement="top" trigger="click" width="300px" popper-class='backtrack-popover-container'>
					<div class="backtrack-container">
						<div class="flexrbc backtrack-speed">
							<div class="backtrack-speed-btn flexccc" @click="decreaseByOne">
								<i class="el-icon-d-arrow-left"></i>
							</div>
							<div class="backtrack-speed-btn flexccc" @click="decreaseByPointOne">
								<i class="el-icon-arrow-left"></i>
							</div>
							<div class="backtrack-speed-input flexccc">
								<el-input v-model="inputValue" placeholder="只能输入1-3之间的数字" @input="handleInput"
									type="number"></el-input>
							</div>
							<div class="backtrack-speed-btn flexccc" @click="increaseByPointOne">
								<i class="el-icon-arrow-right"></i>
							</div>
							<div class="backtrack-speed-btn flexccc" @click="increaseByOne">
								<i class="el-icon-d-arrow-right"></i>
							</div>
						</div>
					</div>
					<div class="fault-btn pointer" slot="reference">故障回溯</div>

				</el-popover>
			</div>
		</div>
	</div>
</template>


<script>
	import api from "@/api/http.js";
	import faultList from '../components/faultList.vue'
	import modelOutlinePass from '@/components/modelOutlinePass'
	const configUrl = window.IP
	import data from '/src/utils/json/data.js'
	export default {
		name: "elevatorFault",
		data() {
			return {
				speedValue: 1,
				inputValue: 1,
			}
		},
		components: {
			faultList,
			modelOutlinePass
		},
		computed: {
			resourUrl() {
				return configUrl.resourUrl;
			},
			dataList() {
				return data.slice(0, 15)
			}
		},
		beforeDestroy() {
			this.scene = null
			this.camera = null
			this.renderer = null
			this.controls = null;
			this.container = null;
			this.composer = null;
			this.outlinePass = null;
			this.renderPass = null;
			this.animateId = null;
		},
		created() {},
		mounted() {},
		methods: {
			handleInput() {
				const value = parseFloat(this.inputValue);
				if (isNaN(value)) {
					this.$message.error('请输入有效的数字');
					this.inputValue = 1;
				} else if (value < 1 || value > 3) {
					this.$message.error('输入的数字必须在 1 - 3 之间');
					this.inputValue = Math.min(Math.max(value, 1), 3);
				} else {
					this.errorMessage = '';
				}
			},
			decreaseByOne() {
				const tempValue = parseFloat(this.inputValue) * 100;
				const newValue = (tempValue - 100) / 100;
				this.inputValue = Math.min(Math.max(newValue, 1), 3);
				this.handleInput();
			},
			decreaseByPointOne() {
				const tempValue = parseFloat(this.inputValue) * 100;
				const newValue = (tempValue - 10) / 100;
				this.inputValue = Math.min(Math.max(newValue, 1), 3);
				this.handleInput();
			},
			increaseByOne() {
				const tempValue = parseFloat(this.inputValue) * 100;
				const newValue = (tempValue + 100) / 100;
				this.inputValue = Math.min(Math.max(newValue, 1), 3);
				this.handleInput();
			},
			increaseByPointOne() {
				const tempValue = parseFloat(this.inputValue) * 100;
				const newValue = (tempValue + 10) / 100;
				this.inputValue = Math.min(Math.max(newValue, 1), 3);
				this.handleInput();
			}
		}
	};
</script>
<style lang="scss">
	@import "@/styles/variables.scss";

	.fault-popover-container {

		border: 1px solid $primaryColor;
		padding: 0 !important;
		color: #fff;

		.popper__arrow::after {
			color: $primaryColor;
			border-top-color: $primaryColor !important;
		}
	}

	.backtrack-popover-container {
		padding: 0 !important;
	}
</style>
<style lang="scss" scoped>
	@import "@/styles/variables.scss";

	.backtrack-container {
		width: 100%;
		padding: 4px 12px;

		.backtrack-speed {
			.backtrack-speed-btn {
				width: 40px;
				text-align: center;
				color: $primaryColor;
			}

			.backtrack-speed-input {
				width: 120px
			}
		}
	}

	.fault-container {
		width: 100%;

		.fault-header {
			background: rgb(102, 106, 254);

			div {
				width: 150px;
				text-align: center;
				line-height: 30px;
			}
		}

		.fault-row {
			background: $primaryColor;

			div {
				width: 150px;
				text-align: center;
				line-height: 30px;
			}
		}
	}

	.fault-btn {
		background: $primaryColor;
		color: #fff;
		padding: 0 24px;
		line-height: 30px;
		border-radius: 4px;
	}

	.app-right-container {
		background: rgba(0, 0, 0, 0) !important;
		overflow: hidden;
	}

	.model-container {
		width: 100%;
		height: 100%;
		position: relative;
	}

	#model-container {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	#model-container canvas {
		width: 100% !important;
		height: 100%;
	}
</style>